<template>
  <div class="products">
      <div
       v-for="item in pro"
       :key="item.eventId"
       @click="handlerPros(item.siloEn,item.eventId,item.urlkey)"
       >
        <img :src="item.imageUrl" alt="">
        <section>
          <p>
            <span>{{item.englishName}}</span><br>
            <span>{{item.chineseName}}</span><br>
            <span>{{item.discountText}}</span>
          </p>
        </section>
       </div>
  </div>
</template>

<script>
export default {
  props: ['pro'],
  methods: {
    handlerPros (data1, data2, data3) {
      this.$router.push(
        `/productlist?siloEn=${data1}&eventCode=${data2}&URLKey=${data3}`
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.products {
  margin-top: 20px;
  padding:0 10px ;
  img {
    width: 100%;
    margin-bottom: .1rem;
  }
  div {
    position: relative;
    section {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: .8rem;
      font-size: .15rem;
      color: #fff;
      background: rgba(0,0,0,.1);
      p {
        position: absolute;
        bottom: .11rem;
        left: .1rem;
        z-index: 10;
        width: 100%;
      }
    }
  }
}
</style>
